<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>File upload test</title>

	<style>
		body {
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		button, input[type="submit"] {
			margin-top: 10px;
			padding: 0.25em 1em;
		}

		fieldset {
			margin: 1em;
		}
	</style>
</head>
<body>
	<fieldset>
		<legend>Single file upload</legend>
		<form action="/upload/single/1234" method="post" enctype="multipart/form-data">
			<input type="text" name="name" id="name" value="Test User">
			<p>Select image to upload:</p>
			<input type="file" name="myfile" id="myfile">
			<br/>
			<input type="submit" value="Upload one image" name="submit">
		</form>
	</fieldset>
	<fieldset>
		<legend>Multiple file upload</legend>
		<form action="/upload/multi" method="post" enctype="multipart/form-data">
			<p>Select image to upload:</p>
			<input type="file" name="myfile" id="myfile" multiple>
			<br/>
			<input type="submit" value="Upload multiple images" name="submit">
		</form>
	</fieldset>
	<fieldset>
		<legend>Upload with AJAX</legend>
		<p>Select image to upload:</p>
		<input type="file" name="myJSFile" id="myJSFile">
		<br/>
		<button onclick="uploadPut('/upload/1234')">Upload one image via AJAX</button>
		<p id="responseOK" style="color: green; font-weight: bold"></p>
		<p id="responseError" style="color: red; font-weight: bold"></p>
	</fieldset>
</body>
<script>
	function uploadPut(postUrl)
	{
		const input = document.querySelector("#myJSFile");
		const pOK = document.querySelector("#responseOK");
		const pError = document.querySelector("#responseError");
		pOK.innerHTML = "";
		pError.innerHTML = "";

		var req = new XMLHttpRequest();
		req.open("PUT", postUrl);
		req.setRequestHeader("Content-type", "image/png");
		req.onload = function(event) {
			if (event.target.status == 200)
				return pOK.innerHTML ="Uploaded successfully! " + event.target.responseText;

			pError.innerHTML = "Upload error: " + event.target.responseText;
		}
		req.send(input.files[0]);
	}
</script>
</html>
